/* eslint-disable react-refresh/only-export-components */
import Header from './components/Header'
import DateCom from './components/Date'
import Item from './components/Item'
import { getTicketListApi } from '../../api/ticket'
import { useLoaderData, useNavigate, useSearchParams } from 'react-router-dom'
// 2. 导入无限滚动组件
import { InfiniteScroll, PullToRefresh } from 'antd-mobile'
// 导入模块化的样式
import styles from './css/query.module.css'
import { useState, useEffect } from 'react'
import TabFooter from './components/TabFooter'
import {
  List as VirtualizedList,
  AutoSizer,
  WindowScroller
} from 'react-virtualized'

function QueryTicket() {
  const nav = useNavigate()
  const [sp, setSP] = useSearchParams()
  const loaderData = useLoaderData()
  // 1. 定义两份响应式数据
  // 响应式状态：存储所有页的列表数据
  // 一进入组件，就把第一页数据渲染出来
  const [list, setList] = useState(loaderData.list)
  // 响应式状态：记录当前请求的是第几页的数据
  const [page, setPage] = useState(1)

  // 4. 拷贝无限滚动需要的状态和函数
  const [hasMore, setHasMore] = useState(true)
  async function loadMore() {
    // 1. 页码值 +1
    // 2. 根据最新的页码值，调用接口，请求第 X 页的数据(处理请求参数)
    // 3. 把请求到的数据，追加到 list 数组的末尾
    // 4. 判断是否还有下一页（如果请求到的数组为空，则没有下一页啦，把 hasMore 设为 false 即可）
    setPage((prev) => prev + 1)
    // 准备5个参数：
    // 先拿到前4个参数对象，再往里追加 page 这第5个参数
    const data = { ...Object.fromEntries(sp), page: page + 1 }
    const { data: res } = await getTicketListApi(data)
    setList([...list, ...res])
    if (res.length === 0) {
      // 只要数组length为0，说明没有下一页了，一定把 hasMore 改为 false
      setHasMore(false)
    }
  }

  // 下拉刷新的实现逻辑
  const onRefreshHandler = () => {
    setPage(1)
    setHasMore(true)
    setSP(Object.fromEntries(sp))
    setList(loaderData.list)
  }

  useEffect(() => {
    // 1. 先重置滚动条的位置到 0
    window.scrollTo({
      top: 0
    })
    // 把 loader 返回的最新的 list 数据，保存到 list 数组中
    setList(loaderData.list)
    // 把页码值重置为 1
    setPage(1)
    // 把是否还有更多重置为 true
    setHasMore(true)
  }, [loaderData.list])

  return (
    <div className={styles.box}>
      {/* 导航栏组件 */}
      <Header />
      {/* 日期组件 */}
      <DateCom />

      <PullToRefresh onRefresh={onRefreshHandler}>
        {/* 循环渲染列表数据 */}
        <WindowScroller>
          {({ height, scrollTop, isScrolling }) => (
            <AutoSizer disableHeight>
              {({ width }) => (
                <VirtualizedList
                  autoHeight
                  rowCount={list.length}
                  rowRenderer={({ index, key, style }) => (
                    <div
                      key={key}
                      style={style}
                      // onClick={() => nav('/ticket/' + list[index].id + '?date=x&from=x&to=x')}
                      onClick={() =>
                        nav(
                          `/ticket/${list[index].id}?date=${sp.get(
                            'date'
                          )}&start=${sp.get('start')}&end=${sp.get('end')}`
                        )
                      }
                    >
                      <Item {...list[index]} />
                    </div>
                  )}
                  width={width}
                  height={height}
                  rowHeight={67}
                  overscanRowCount={10}
                  isScrolling={isScrolling}
                  scrollTop={scrollTop}
                />
              )}
            </AutoSizer>
          )}
        </WindowScroller>
      </PullToRefresh>

      {/* 3. 拷贝无限滚动组件 */}
      <InfiniteScroll
        loadMore={loadMore}
        hasMore={hasMore}
      />

      {/*底部的 Tab 区域*/}
      <TabFooter />
    </div>
  )
}

export default QueryTicket

export const loader = async ({ request }) => {
  // console.log(request.url)
  // new URL(需要被解析的url字符串)
  const urlObj = new URL(request.url)
  // urlObj.searchParams 就是解析出来的“查询参数”
  // console.log(urlObj.searchParams)
  const sp = Object.fromEntries(urlObj.searchParams)
  // console.log(sp)

  // 调用接口，请求火车的列表数据
  const { data: res } = await getTicketListApi(sp)
  console.log(res)
  return { list: res }
}
